<template>
  <edu-mescroll-uni @init="mescrollInit" @down="refresh" @up="reachBottom">
    <view class="page-box">
      <view
        class="question-item u-border-bottom"
        v-for="item in questionList"
        :key="item.id"
        @click="readMessage(1, item)"
      >
        <view class="top">
          <u-avatar :src="item.send_user_avatar_url" size="64"></u-avatar>
          <view class="name">{{ item.send_user_nick_name }}</view>
          <text class="badge" v-if="item.is_read == 0"></text>
        </view>
        <view class="content">{{ item.content }}</view>
        <view class="time">{{ item.create_time | timeFormat }}</view>
      </view>
    </view>
  </edu-mescroll-uni>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      questionList: [],
    }
  },
  methods: {
    refresh() {
      this.mescroll.resetUpScroll()
    },
    // 页面数据
    reachBottom(page) {
      this.$edu.api
        .getUserNotifyQuestion({
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res

          if (page.num == 1) this.questionList = []
          this.questionList = this.questionList.concat(data.data)
          this.mescroll.endBySize(data.data.length, data.total)
        })
    },
    // 读取消息
    readMessage(operate, query) {
      /* *
       * operate Number
       * 0：进入列表页；1：单个消息已读；2：一键已读；
       * object Number
       * operate不等于0时必传【1系统消息；2课程提醒；3互动消息；4提问消息；】
       * */
      let params = {
        operate: operate,
        object: this.value,
      }
      // operate等于1时必传，消息id
      if (operate == 1) {
        this.handlePath(query)
        // 单个消息时状态已读时，退出不执行下面操作
        if (query.is_read == 1) return
        params = {
          ...params,
          id: query.id,
        }
      }
      this.$edu.api.createUserMessageRead(params).then((res) => {
        const { data } = res
        if (operate == 1) {
          // operate状态为1时设置单个消息状态为已读
          this.questionList.forEach((item) => {
            if (item.id == query.id) {
              item.is_read = 1
            }
          })
        } else if (operate == 2) {
          // operate状态为2时设置所有消息状态为已读
          this.questionList.forEach((item) => {
            item.is_read = 1
          })
        }
        // 没有已读消息
        if (data.question_unread == 0) {
          this.$emit('finish')
        }
      })
    },
    // 跳转到对话框
    handlePath(item) {
      this.$u.route('/pageUser/user/messageQuestionReply', {
        id: item.notify_data_id,
        sid: item.send_user_id,
        name: item.send_user_nick_name,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.page-box {
  padding-left: 30rpx;
}
.question-item {
  padding: 28rpx 30rpx 28rpx 0;
  .top {
    display: flex;
    align-items: center;
    position: relative;
  }
  .name {
    margin-left: 14rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: $edu-main-color;
  }
  .content {
    margin-top: 14rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: $edu-content-color;
    line-height: 40rpx;
    word-break: break-all;
  }
  .time {
    margin-top: 14rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: $edu-tips-color;
  }
  .badge {
    width: 16rpx;
    height: 16rpx;
    background: $edu-price-color;
    position: absolute;
    right: 0;
    top: 24rpx;
    border-radius: 100%;
  }
}
</style>
